<template>
  <div class="file-list">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="附件标题" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.document_name }}</p>
        </template>
      </el-table-column>
      <el-table-column label="文件大小" width="180">
        <template slot-scope="scope">
          <p>{{ scope.row.document_size }}M</p>
        </template>
      </el-table-column>
      <el-table-column label="下载地址">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="toPicUrl(scope.row.document_url)"
            >查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="业务员">
        <template slot-scope="scope">
          <p>{{ scope.row.employee_name }}</p>
        </template>
      </el-table-column>
      <el-table-column label="上传时间">
        <template slot-scope="scope">
          <p>{{ scope.row.document_uploadtime }}</p>
        </template>
      </el-table-column>
      <el-table-column label="管理">
        <template slot-scope="scope">
          <el-button
            type="warning"
            plain
            size="mini"
            icon="el-icon-delete"
            @click="deleteFile(scope.row.document_id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="btns">
      <el-upload
        class="upload-demo"
        action="http://118.190.210.28:8080//document/addDocument"
        name="fileList"
        :on-success="uploadSuccess"
        :on-error="uploadFail"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">上传</el-button>
      </el-upload>
      <el-button type="info" size="small" class="closeBtn" @click="quitFileList"
        >关闭</el-button
      >
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      fileList: [],
      tableData: [],
    };
  },
  methods: {
    ...mapActions('gendanStore', [
      'gendanFileFindAction',
      'gendanFileDeleteAction',
      'gendanAddFileAction',
    ]),
    toPicUrl(url) {
      console.log(url);
      window.open('http://118.190.210.28:8080' + url, '_blank');
    },

    deleteFile(document_id) {
      // console.log(document_id);
      this.gendanFileDeleteAction(document_id.toString())
        .then(() => {
          // console.log(res);
          this.gendanFileFindAction(parseInt(this.$route.query.documentary_id))
            .then((res) => {
              console.log('查询成功：', res);
              this.tableData = res.data.data;
            })
            .catch((err) => {
              console.log('文件查询失败：', err);
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },

    uploadSuccess(res) {
      console.log('文件上传：', res);
      this.fileList.push(res.data.fileList[0]);
      let documentary_id = this.$route.query.documentary_id;
      // console.log(documentary_id);
      console.log(this.fileList);
      if (this.fileList.length) {
        let fileArr = this.fileList.map((item) => {
          // console.log(item);
          item.documentary_id = documentary_id;
          item.document_name = item.fileName;
          item.document_size = item.filesize.slice(4);
          item.employee_name = '超级管理员';
          item.document_url = item.fileUrl;
          delete item.fileName;
          delete item.filesize;
          delete item.fileList;
          delete item.fileUrl;
          return item;
        });
        // 文件入库
        this.gendanAddFileAction(fileArr)
          .then(() => {
            console.log('文件入库成功');
            this.fileList = [];
            this.gendanFileFindAction(
              parseInt(this.$route.query.documentary_id)
            )
              .then((res) => {
                console.log(res);
                this.tableData = res.data.data;
              })
              .catch((err) => {
                console.log('文件查询失败：', err);
              });
          })
          .catch((err) => {
            console.log('文件入库失败:', err);
          });
      }
    },

    uploadFail(err) {
      console.log('文件上传失败:', err);
    },

    quitFileList() {
      this.$router.back();
    },
  },
  created() {
    console.log(parseInt(this.$route.query.documentary_id));
    if (this.$route.query.documentary_id) {
      this.gendanFileFindAction(parseInt(this.$route.query.documentary_id))
        .then((res) => {
          console.log('文件查询成功:', res);
          this.tableData = res.data.data;
        })
        .catch((err) => {
          console.log('文件查询失败：', err);
        });
    }
  },
};
</script>

<style lang="scss" scoped>
.btns {
  position: relative;
  width: 200px;
  margin-top: 40px;
}

.el-table__body-wrapper {
  height: unset !important;
}

.closeBtn {
  position: absolute;
  top: 0;
  right: 0;
}
</style>
